<template>
    <view class="bg-[#f8f8f8] min-h-screen">
        <view class="h-[10rpx]"></view>
        
        <view @click="classInfo.teachingDetails(classInfo.data.location_id)" class="flex items-center py-[20rpx] bg justify-between pr-[46rpx]">
           <!-- <view @click="navigateTo('/pages/teachingDetails/teachingDetails')" class="flex items-center py-[20rpx] bg justify-between pr-[46rpx]"> -->
            <view class="flex items-center ml-[105rpx]">
                <view class="w-[85rpx] h-[85rpx] relative">
                    <image class="w-[85rpx] h-[85rpx]"
                        src="https://gangantao.com/image/20241216/1ee10869-16bf-4e3a-b607-4aad213c4534.png"></image>
                </view>
                <view class="text-[#3D3D3D] font-medium ml-[38rpx] text-[46rpx]">
                    {{classInfo.data.location_detail}}
                </view>
            </view>

            <u-icon name="arrow-right" color="#444444" size="20"></u-icon>

        </view>
        <image class="w-[100vw] h-[337rpx]"
            :src="getDataUril.getSplitImgUrl(classInfo.data.cover)"
            mode="scaleToFill" />
        <view class="px-[30rpx] pt-[17rpx] bg-white pb-[40rpx]">
            <view class="text-[#3D3D3D] text-[38rpx] font-medium">{{classInfo.data.school_name}}</view>
            <view class="flex justify-between items-center text-[#3D3D3D] text-[38rpx] font-medium my-[8rpx]">
                <text>{{classInfo.data.class_name}}</text>
                <text class="text-[#FF0000]">{{classInfo.data.tuition_fee}}元</text>
            </view>
            <view class="flex my-[11rpx]">
                <view class=" text-white text-[28rpx] bg-[#FD755D] rounded px-1  mr-[12rpx] tracking-wider">一级学院</view>
                <view class=" text-white text-[28rpx] bg-[#FD755D] rounded px-1 mr-[12rpx]">二级学院</view>
                <view class=" text-white text-[28rpx] bg-[#FFA812] rounded px-1 mr-[12rpx]">免费</view>
                <view class=" text-white text-[28rpx] bg-[#FFA812] rounded px-1 mr-[12rpx]">社区</view>
                <view class=" text-white text-[28rpx] bg-[#FFA812] rounded px-1">艺术</view>
            </view>
            <view>{{classInfo.data.course_content}}</view>
            <view v-if="classInfo.data.rel_type == 2" class="text-right mt-[160rpx] border-b border-[#D8D8D8] pb-[20rpx]"><text>已预约人数/名额：</text><text
                    class="text-[#FD755D]">{{classInfo.data.alreadyApply}}</text>
                <text>/{{classInfo.data.total_capacity}}</text>
            </view>
            <view v-if="classInfo.data.rel_type == 1" class="text-right mt-[160rpx] border-b border-[#D8D8D8] pb-[20rpx]"><text>已报人数/名额：</text><text
                    class="text-[#FD755D]">{{classInfo.data.alreadyApply}}</text>
                <text>/{{classInfo.data.total_capacity}}</text>
            </view>
            <view class="mt-[20rpx] text-[#3D3D3D] font-medium">上课时间：{{classInfo.data.start_time}}</view>
            <view class="mt-[10rpx] text-[#3D3D3D font-medium w-full flex justify-between items-center">上课地点：{{classInfo.data.location}}<u-icon name="map" color="#007AFF" size="24"></u-icon></view>
            <view class="mt-[10rpx] text-[#3D3D3D font-medium">上课班级：{{classInfo.data.class_name}}</view>
            <view class="mt-[10rpx] text-[#3D3D3D font-medium">上课教师：{{classInfo.data.teacher_name}}</view>
        </view>
    </view>
    <view class=" fixed bottom-0 flex justify-between z-10 px-[40rpx] items-center w-[100vw] bg-white py-[13rpx]">
        <view class="flex">
            <view class="mr-[40rpx] flex flex-col items-center justify-center">
                <u-icon name="share" color="#3D3D3D" size="24"></u-icon>
                <view class="mt-1">分享</view>
            </view>
            <view class="flex flex-col items-center justify-center">
                <u-icon name="star" color="#3D3D3D" size="24"></u-icon>
                <view class="mt-1">收藏</view>
            </view>
        </view> 
        <view v-if="classInfo.data.rel_type == 2"  v-show="classInfo.isShow" @click="classInfo.handleReservation(classInfo.classId)" class=" text-white py-[10rpx] px-4 bg-[#FD755D] rounded  text-[32rpx]">{{classInfo.yyName}}</view>
        <view v-if="classInfo.data.rel_type == 1"  v-show="classInfo.isShow" @click="classInfo.handleLocalRegistrationDetails(classInfo.classId)" class=" text-white py-[10rpx] px-4 bg-[#FD755D] rounded  text-[32rpx]">{{classInfo.bbName}}</view>
        
        <view v-if="classInfo.data.rel_type == 2"  v-show="classInfo.isShowOk">{{classInfo.yyName}}</view>
        <view v-if="classInfo.data.rel_type == 1"  v-show="classInfo.isShowOk">{{classInfo.bbName}}</view>
        
    </view>
</template>
<script setup>
import Tabbar from "@/components/tabbar.vue";
import noLogin from "@/components/noLogin.vue";
import api from "@/api/api"
import Home from "@/api/Home"
import { useUserStore } from '@/stores/userinfo'
import { ref, reactive } from "vue" 
import EventDetails from "@/api/EventDetails"
 

const ClassInfoModel = reactive({
  address: '',
  class_id: '',
  class_name: '',
  course_content: '',
  cover: '',
  end_time: '',
  enrolled_students: '',
  latitude: '',
  location: '',
  longitude: '',
  school_name: '',
  start_time: '',
  subject_name: '',
  teacher_name: '', 
  total_capacity: '',
  tuition_fee: '',
  rel_type:1
})
import {
	baseUrl
} from '@/utils/baseUrl.js'; 
const res = wx.getMenuButtonBoundingClientRect()
const show = ref(false) 
const navigateTo =(url)=>{
  uni.navigateTo({
    url
  })
}
const getDataUril = reactive({
  getSplitImgUrl(ImgUrl){
    return baseUrl+ImgUrl
  }
})
onLoad((options) => {   
     classInfo.classId = options.classes_id 
  })

const classInfo = reactive({ 
  classId: '',
  data: [],
  isShow:true ,
  isShowOk:false,
  bbName: '立即报名', 
  yyName: '立即预约', 
  getClassInfo:async() =>{ 
    if(classInfo.classId  ===''){
      uni.showLoading({ title: '请传班级ID' })
      return
    } 
    const {code,msg,data} = await EventDetails.getClassInfo({
      classes_id: classInfo.classId
    })  
    if (code === 200) {
           classInfo.data=data  
           //是否已经报名 
           classInfo.getIsApplyed
    }else{
        // uni.showLoading({ title: "数据异常" }) 
         navigateTo('/pages/login/login')
         
    }
  },
  getIsApplyed: async () => {
      const {code,msg,data} = await EventDetails.getIsApplyed({
         classes_id: classInfo.classId
        })  
        if(code == 200 ){
          debugger
            if(data == null){
              classInfo.isShow = false
              classInfo.isShowOk =true
              classInfo.bbName='已报名' 
              classInfo.yyName='已预约'
            }
        } 
  }
  ,
   teachingDetails: async (location_id)=>{
     navigateTo('/pages/teachingDetails/teachingDetails?location_id='+location_id)
   },
  handleLocalRegistrationDetails : async (classes_id) =>{ 
    navigateTo('/pages/localRegistrationDetails/localRegistrationDetails?classes_id='+classes_id)
  },
  handleReservation:async (classes_id) =>{ 
    console.log(123)
    navigateTo('/pages/localRegistrationDetails/reservation?classes_id='+classes_id)
  }
}) 
onMounted(
classInfo.getClassInfo
) 
</script>
<style scoped></style>